<script setup>
import { onMounted } from "vue"
import Viewer from 'viewerjs'
import "viewerjs/dist/viewer.css"

const props = defineProps(["blogImgs", "isBlog"])

const blogClass = ref("");// blog详情页面需求
if (props.isBlog) blogClass.value = "imgsblog"

const viewer = ref(null)
const viewerDom = ref(null); // 用于装载用ref属性获取的Dom
onMounted(() => {
  // 3句话，让viewer为我打工
  viewer.value = new Viewer(viewerDom.value, {
    button: false, //右上角关闭按钮
  })
});

// 加载不出来图片，重试3次，用于阿里云刚刚才存储图片，这边就开始访问
const handleError = (event) => {
  let errortime = event.target.attributes.errortime;
  errortime.value < 3 ? setTimeout(() => { event.target.src = event.target.src; errortime.value++ }, 1000) : 0;
}

</script>

<template>
  <div class="imgs viewer" id="viewer" :class="blogClass" ref="viewerDom" @click.once="handleScroll"
    @scroll.passive.once="handleScroll">
    <img v-for="img in blogImgs" :key="img" :src="img.replace('http://', 'https://')" errortime=0
      :onerror="handleError" />
  </div>
</template>

<style scoped lang="less">
.imgs {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  /* height: 230px; */
  margin-top: 10px;

  img {
    margin-right: 2px;
    object-fit: cover;
    height: 130px;
    width: 130px;
  }
}

.imgsblog {
  white-space: normal;

  img {
    height: auto;
    width: 100%;
    margin-right: 0px;
    margin-top: 10px;
  }
}
</style>

<style lang="less">
/* viewer的按钮设置: 由于viwer是直接生成新dom到根下，只能写在这里 */
.viewer-container .viewer-footer {

  /* 工具栏上的图片名和尺寸 */
  .viewer-title {
    display: none;
  }

  .viewer-toolbar {

    /* 工具栏： 放大 */
    .viewer-zoom-in,
    /* 工具栏：缩小  */
    .viewer-zoom-out,
    /* 工具栏： 中间幻灯片播放 */
    .viewer-play,
    /* 工具栏： 逆时针旋转 */
    .viewer-rotate-left,
    /* 工具栏： 水平旋转 */
    .viewer-flip-horizontal,
    /* 工具栏： 垂直旋转 */
    .viewer-flip-vertical {
      display: none;
    }
  }
}
</style>